<template>
	<view>
		<uni-popup ref="popup" :animation="false" mask-background-color="rgba(0,0,0,0.8)" @maskClick="maskClick">
			<view class="popupBox">
				<view class="pListImg">
					<image style="width: 480rpx;" :src="imgurl" mode="widthFix"></image>
				</view>
				<view class="pListBox">
					<view class="pListBox_top">
						<view class="title">
							分享至
						</view>
						<view class="pListBox_list">
							<view class="p_list_li" @click="shareShow=true">
								<image class="p_list_li_img" src="/static/blindbox/daily-tasks02.png" mode="widthFix">
								</image>
								<text>微信好友</text>
							</view>
							<view class="p_list_li" @click="posterServe">
								<image class="p_list_li_img" src="/static/blindbox/daily-tasks03.png" mode="widthFix">
								</image>
								<text>生成海报</text>
							</view>
							<view class="p_list_li" @click="myInvitation">
								<image class="p_list_li_img" src="/static/blindbox/daily-tasks04.png" mode="widthFix">
								</image>
								<text>我的邀请</text>
							</view>
						</view>
					</view>
					<view class="know" @click="close">取消</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupPoster" type="center" mask-background-color="rgba(0,0,0,0.8)" @maskClick="maskClick">
			<image style="width: 530rpx;" :src="imgurl" mode="widthFix" :show-menu-by-longpress='true'></image>
			<view style="color: #ffffff; width: 100%; text-align: center;">长按保存图片或者截屏保存图片</view>
		</uni-popup>
		<view class="forward" v-if="shareShow" @click="shareShow=false">
			<view class="li-img">
				<image src="@/static/my/jt.png" mode="widthFix"></image>
			</view>
			<view class="li-word">点击右上角【···】分享</view>
		</view>
		<l-painter hidden ref="painter" />
	</view>
</template>

<script>
	// #ifdef H5
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	// #endif
	import {
		poster
	} from './poster.js'
	import lPainter from '@/pages/subPackages/pagesE/components/lime-painter/components/l-painter/l-painter'
	export default {
		name: "invitation-tasks",
		data() {
			return {
				popupBoxStatus: true,
				imgurl: '',
				shareShow: false,
				poster: poster
			};
		},
		components:{
			lPainter
		},
		created() {
			this.share()
		},
		mounted() {
			//如果本地有图片了，直接取，解决一些页面切换canvas没有重画
		},
		methods: {
			share() {
				// #ifdef H5
				wechat.scanQRJssdk(wx => {
					let data = {
						title: "神椰 Magic CoCo",
						desc: "欢迎来到神椰 Magic CoCo，享受更优的数字权益", // 分享描述
						link: this.domainName + '/pages/index/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.domainName + '/static/my/kyy.png', // 分享图标
						success: function(e) {
							// 设置成功
							console.log("设置成功", e);
						},
					}
					wx.updateAppMessageShareData(data)
					wx.updateTimelineShareData(data)
				})
				// #endif
			},
			async open() {
				uni.showLoading({
					title: '海报生成中...',
					mask: true
				})
				let data = await this.$api.getInviteQRCode()
				let inviteQrCode = data.result.inviteQrCode
				let inviteUrl = 'data:image/png;base64,' + data.result.inviteUrl
				this.canvasImage(inviteQrCode, inviteUrl)

			},
			close() {
				uni.showTabBar()
				this.$refs.popup.close()
			},
			// 生成海报
			posterServe() {
				this.$refs.popup.close()
				this.popupBoxStatus = false
				this.$refs.popupPoster.open()

			},
			maskClick(){
				uni.showTabBar()
			},
			// 我的邀请
			myInvitation() {
				uni.navigateTo({
					url: '/pages/subPackages/pagesD/blindbox/my-invitation/my-invitation'
				})
			},
			canvasImage(ewmImg, inviteUrl) {
				this.poster.css.backgroundImage = `url(${inviteUrl})`
				this.poster.views[0].src = ewmImg
				console.log(this.poster)
				// 渲染
				this.$refs.painter.render(this.poster);
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'base64',
					quality: 1,
					success: (res) => {
						// console.log(res.tempFilePath);
						setTimeout(() => {
							uni.hideLoading();
							this.imgurl = res.tempFilePath;
							uni.hideTabBar()
							this.$refs.popup.open()
						}, 1000)
						// 非H5 保存到相册
					},
					fail: (error) => {
						console.log('error',error)
						uni.showToast({
							icon:'none',
							title: '名片加载失败'
						})
						// uni.hideLoading()

					}
				});
			},
			// saveImage() {
			// 	let filePath='poster.jpg';
			// 	let base64=this.imgurl.replace(/^data:image\/\w+;base64,/, "");
			// 	uni.getFileSystemManager().writeFile({
			// 		filePath: filePath, //创建一个临时文件名
			// 		data: base64,
			// 		encoding: 'base64', //写入当前文件的字符编码
			// 		success: res => {
			// 			uni.saveImageToPhotosAlbum({
			// 				filePath: filePath,
			// 				success: function(res2) {
			// 					uni.showToast({
			// 						title: '保存成功，请从相册选择再分享',
			// 						icon: "none",
			// 						duration: 5000
			// 					})
			// 				},
			// 				fail: function(err) {
			// 					console.log('err',err)
			// 					uni.showToast({
			// 						title: '下载失败',
			// 						icon: 'none'
			// 					});
			// 				}
			// 			})
			// 		},
			// 		fail: err => {
			// 			console.log('err',err)
			// 			uni.showToast({
			// 				title: '下载失败',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	})

			// },


		}
	}
</script>

<style scoped>
	/* 弹窗 */
	.popupBox {
		padding-top: 100rpx;
		width: 100%;
		/* height: 100vh; */
		box-sizing: border-box;
	}

	.popupBox .erWm {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 146rpx;
		width: 186rpx;
		height: 186rpx;
		padding: 6rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.pListImg {
		position: fixed;
		width: 100%;
		top: 160rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pListBox {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #ffffff;
	}

	.pListBox_top {
		width: 100%;
		padding: 30rpx 60rpx;
		box-sizing: border-box;
	}

	.pListBox_top .title {
		font-size: 32rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.pListBox_list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.p_list_li {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
	}

	.p_list_li image {
		width: 92rpx;
		height: 92rpx;
	}

	.know {
		border-top: 2rpx solid #DFDFDF;
		padding-top: 22rpx;
		padding-bottom: 50rpx;
		font-size: 30rpx;
		width: 100%;
		text-align: center;
		color: #FF2121;
	}

	.forward {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		z-index: 999;
	}

	.forward .li-img image {
		position: absolute;
		top: -56rpx;
		right: 0;
		width: 266rpx;
	}

	.li-word {
		font-size: 46rpx;
		color: #FFFFFF;
		position: absolute;
		top: 216rpx;
		right: 84rpx;
	}

	.save_img {
		width: 272rpx;
		height: 88rpx;
		border-radius: 400rpx;
		color: #222222;
		text-align: center;
		line-height: 88rpx;
		background: #FFFFFF;
		margin: 0 auto;
		margin-top: 40rpx;
	}
</style>